<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用CSS+DIV进行弹性页面布局</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="../static/css/main.css">
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>
<body>
<div class="container main">
    <div id="head"></div>
    <script type="text/javascript">
        $("#head").load("../common/head.html");
    </script>
    <div class="container page_twelve">
        <div class="header">这是头部信息区</div>
        <div class="nav">这是导航信息区</div>
        <div class="main">
            <div class="left">这是左侧信息区，固定宽度</div>
            <div class="right">
                <div class="content">右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区
                    自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度
                    右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度
                    右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度
                    右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度右侧信息区自适应宽度
                    右侧信息区自适应宽度右侧信息区自适应宽度，溢出控制overflow设置为auto时，可以看到溢出信息，同时添加滚动条。</div>
            </div>
        </div>
        <div class="footer">尾部信息区</div>
    </div>
</div>
</body>
</html>